<template>
  <div class="app-container pagebox">
    <div class="bg">
      <a-form layout="inline" :form="form" @submit="handleSubmit" style="padding: 20px 20px" :labelCol="{ span: 24 }">
        <a-form-item label="开始时间">
          <a-date-picker @change="onChangestart" :value="form.startDate" />
        </a-form-item>
        <a-form-item label="结束时间">
          <a-date-picker @change="onChangeEnd" :value="form.endDate" />
        </a-form-item>
        <a-form-item label="调机人员">
          <a-input placeholder="调机人员" v-model="form.operator" />
        </a-form-item>
        <a-form-item label="电话号码">
          <a-input placeholder="电话号码" v-model="form.phoneNumber" />
        </a-form-item>
        <a-form-item label="设备编号">
          <a-input placeholder="设备编号" v-model="form.macNum" />
        </a-form-item>
        <a-form-item label="用戶">
          <a-input placeholder="用戶" v-model="form.company" />
        </a-form-item>
        <!--        <a-form-item label="维护记录">-->
        <!--          <a-input placeholder="维护记录"  v-model="form.phoneNumber"/>-->
        <!--        </a-form-item>-->
        <!--        <a-form-item label="调机项目">-->
        <!--          <a-input placeholder="调机项目"  v-model="form.phoneNumber"/>-->
        <!--        </a-form-item>-->
        <a-form-item style="margin-top: 34px">
          <a-button type="primary" style="margin-right: 10px" @click="handleQuery()">查询</a-button>
          <a-button type="primary" style="margin-right: 10px" @click="handleAll">全部</a-button>
        </a-form-item>
        <a-form-item style="margin-top: 34px">
          <ExportFile :fetch="getDownloadData" :fields="jsonFields" name="调机历史.xls">
            <a-button type="primary" style="margin-right: 10px" :loading="iconLoading">导出</a-button>
          </ExportFile>
        </a-form-item>
      </a-form>
      <div>
        <a-table
          :loading="Loading"
          :columns="columns"
          :data-source="data"
          :pagination="false"
          :rowKey="
            (record, index) => {
              return index;
            }
          "
        >
          <span slot="lookmore" slot-scope="text, record">
            <a-icon type="right" @click="gotodetail(record)" />
          </span>
        </a-table>
        <div style="padding: 20px">
          <a-pagination size="small" :total="total" :show-total="(total) => `一共 ${total} 页`" @change="changepage" />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
//
const columns = [
  {
    title: '上传时间',
    dataIndex: 'createTime',
  },
  {
    title: '调机人员',
    dataIndex: 'operator',
  },
  {
    title: '电话号码',
    dataIndex: 'phone',
  },
  {
    title: '设备编号',
    dataIndex: 'macNumb',
  },
  {
    title: '用户',
    dataIndex: 'company',
  },
  //  {
  //   title: "维修记录",
  //   dataIndex: "id"
  // },
  // {
  //   title: "调机数目",
  //   dataIndex: "address4"
  // },
  {
    title: '查看详情',
    dataIndex: 'lookmore',
    scopedSlots: { customRender: 'lookmore' },
  },
];

import api from '@/api/statisticalForm.js';
function buildJsonFields(lists) {
  let jsonFields = {};
  lists.forEach((item, index) => {
    if (item.dataIndex != 'operateStatus') {
      jsonFields[item.title] = item.dataIndex;
    }
  });
  return jsonFields;
}

export default {
  data() {
    return {
      data: [],
      columns,
      form: {
        username: '',
        macNum: '',
        operator: '',
        company: '',
        startDate: null,
        endDate: null,
        page: 1,
        pageSize: 10,
      },
      queryform: {
        page: 1,
        pageSize: 10,
      },
      total: 0,
      jsonFields: buildJsonFields(columns),
      iconLoading: false,
      Loading: false,
    };
  },
  created() {
    this.queryform.username = this.form.username = localStorage.getItem('userName');
    this.getNcpByParam();
  },
  methods: {
    gotodetail(record) {
      localStorage.setItem('machineReportData', '');
      localStorage.setItem('machineReportData', JSON.stringify(record));
      this.$router.push({ path: '/machineReportDetail', query: { id: record.id } });
    },
    getNcpByParam() {
      this.Loading = true;
      api.getNcpByParam(this.form).then((res) => {
        this.Loading = false;
        this.data = res.Data.content;
        this.total = res.Data.total;
      });
    },
    handleQuery() {
      this.getNcpByParam();
    },
    handleAll() {
    this.form = {
        username: localStorage.getItem('userName'),
        macNum: '',
        operator: '',
        company: '',
        phoneNumber: '',
        startDate: null,
        endDate: null,
        page: 1,
        pageSize: 10,
      }
        this.getNcpByParam();
    },
    changepage(page, size) {
      this.form.page = page;
      this.form.pageSize = size;
      this.getNcpByParam();
    },
    onChangeEnd(date, dateString) {
      this.form.endDate = dateString;
    },
    onChangestart(date, dateString) {
      this.form.startDate = dateString;
    },
    handleSubmit() {},
    // 获取需要导出的数据
    async getDownloadData() {
      let _this = this;
      if (_this.iconLoading == true) {
        return false;
      }
      let total = _this.total;
      let pageSize = 300;
      let length = Math.ceil(total / pageSize);
      let newLists = [];
      _this.iconLoading = true;
      for (let i = 1; i <= length; i++) {
        let lists = await this.buildDownloadLists({
          pageNum: i,
          pageSize: pageSize,
        });
        newLists.push(lists);
      }
      _this.iconLoading = false;
      return [].concat(...newLists);
    },

    async buildDownloadLists(parames) {
      let _this = this;
      let { pageNum, pageSize } = parames;
      (_this.form.pageSize = pageSize), (_this.form.page = pageNum);
      const res = await api.getNcpByParam({
        ..._this.form,
      });

      if (res.MsgCode !== 0) {
        return;
      }
      return res.Data.content;
    },
  },
};
</script>
<style scoped lang="less">
@import 'index.less';
</style>
